import '../css/todolistCom.scss'
import { Button } from 'antd';
import { useState } from 'react';
import ChannelLevel from '../ChannelLevel/ChannelLevel';
const TodoListCom = (props) => {
  // console.log(props);
  const [list, setList] = useState(props)
  console.log(list);

  // 删除
  const delList = (index) => {
    props.list.list.splice(index, 1)
    let listArr = list.list
    setList({
      list: listArr
    })
  }

  // 清空
  const delArr = () => {
    props.list.list.length = 0
    let listArr = list.list
    setList({
      ...list,
      list: listArr
    })
  }

  const setTodo = (arr) => {
    setList(arr)
  }
  return (
    <>
      <div>
        <Button type="primary" danger onClick={delArr}>清空</Button>
        <table width={'400px'} height={'100px'} border={1} cellPadding={0} cellSpacing={0} >
          <tbody>
          <tr>
            <th>日期</th>
            <th>标题</th>
            <th>优先级</th>
            <th>操作</th>
          </tr>
          {
            props.list.list.length ? props.list.list.map((item, index) => {
              return (
                <tr key={index}>
                  <td align={'center'} className='span'>{item.date}</td>
                  <td align={'center'} className='span'>{item.title}</td>
                  <td align={'center'} className={[item.num==='1' ? 'num1'  : '' || item.num==='2' ? 'num2'  : '' || item.num==='3' ? 'num3'  : '']}>{item.num}</td>
                  <td align={'center'}><Button className='buttondel' type="primary" danger onClick={() => delList(index)}>删除</Button></td>
                  <td>
                    <ChannelLevel todoList={props.list.list} setTodo={setTodo} index={index}/>
                  </td>
                </tr>
              )
            }) :<tr>
              <th colSpan={4}>没有更多数据了</th>
            </tr> 
          }
          </tbody>
        </table>
      </div>
    </>
  );
}

export default TodoListCom;